<template>
  <div class="video-player-container">
    <div class="video-wrapper">
      <div v-if="videoStatus" class="video-status">
        {{ videoStatus }}
      </div>
      <video ref="videoPlayer" class="video-js vjs-big-play-centered vjs-default-skin" preload="auto">
        <source :src="videoUrl || ''" type="video/mp4">
        您的浏览器不支持HTML5视频播放。
      </video>
    </div>
    
    <div class="video-info">
      <h1 class="video-title">{{ videoTitle }}</h1>
      <div class="video-meta">
        <span class="video-views">{{ videoViews }} 播放</span>
        <span class="video-date">{{ videoDate }}</span>
        <span class="video-likes">{{ videoLikes }} 点赞</span>
        <span class="video-collections">{{ videoCollections }} 收藏</span>
      </div>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: {
    videoUrl: {
      type: String,
      default: '',
    },
    videoTitle: {
      type: String,
      default: '视频标题',
    },
    videoViews: {
      type: Number,
      default: 0,
    },
    videoDate: {
      type: String,
      default: '',
    },
    videoLikes: {
      type: Number,
      default: 0,
    },
    videoCollections: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      player: null,
      videoStatus: '',
    }
  },
  watch: {
    videoUrl(newVal) {
      if (this.player) {
        if (newVal && newVal.trim() !== '') {
          this.videoStatus = ''
          this.player.src(newVal)
          this.player.load()
        } else {
          this.videoStatus = '视频资源未找到'
        }
      }
    },
  },
  mounted() {
    this.initPlayer()
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    initPlayer() {
      try {
        // 检查videoUrl是否有效
        if (!this.videoUrl || this.videoUrl.trim() === '') {
          this.videoStatus = '视频资源未找到'
          return
        }
        
        this.player = videojs(this.$refs.videoPlayer, {
          autoplay: false,
          controls: true,
          preload: 'metadata',
          fluid: true,
          language: 'zh-CN',
        })
        
        // 监听错误事件
        this.player.on('error', this.handleError)
        this.player.on('loadedmetadata', () => {
          this.videoStatus = ''
        })
      } catch (error) {
        console.error('视频播放器初始化失败:', error)
        this.videoStatus = '视频播放器加载失败'
      }
    },
    handleError(error) {
      console.error('视频播放错误:', error)
      if (error && error.code === 4) {
        this.videoStatus = '视频格式不支持或文件已损坏'
      } else {
        this.videoStatus = '视频播放失败，请稍后重试'
      }
    },
  },
}
</script>

<style scoped>
.video-player-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.video-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.video-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 10;
}

.video-info {
  margin-bottom: 20px;
}

.video-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.video-meta {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}
</style>